
<template>
	<view class="select-list" v-if="show">
		<view class="search-wrap" id="search" v-if="enableSearch">
			<view class="search-box-content">
				<input class="input-search" type="text" v-model.lazy="inputVal" placeholder-class="input-search-placeholder" placeholder="请输入老师姓名" @confirm="search">
				<text class="icon iconjujue" :class="{'hidden':!inputVal.length}" @click="inputVal=''"></text>
			</view>
			<text class="btn-search" @click="search">搜索</text>
		</view>
		<div class="level-line" :style="mlineStyle" v-if="custom" v-for="(item, cidx) in list" :class="{'select-line-active':cidx==c_idx}" @click="ck(cidx)" :key='cidx'>
			<slot />
		</div>
		<text v-if="!custom" class="level-line" v-for="(item, idx) in list" @click="ck(idx)" :class="{'select-line-active':idx==c_idx}" :key="idx">{{item}}</text>
	</view>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			list: {
				type: Array,
				default: []
			},
			mlineStyle: {
				type: String,
				default: ''
			},
			custom: {
				type: Boolean,
				default: false
			},
			enableSearch: {
				type: Boolean,
				default: false
			}
		},
		data () {
			return {
				c_idx: 0,
				inputVal: ''
			}
		},
		methods:{
			ck (idx){
				this.c_idx = idx,
				this.$emit('ck', idx)
			},
			search(){
				this.inputVal = this.inputVal.trim();
				console.log("search ==>", this.inputVal)
				this.$emit('search',inputVal)
			}
		},
		components: {
		}
	}
</script>

<style scoped>
.select-list{ width: 100%; overflow: hidden; background: #FFFFFF; transition: all 0.3 ease;box-shadow: 0 4upx 6upx #e6e6e6; z-index: 101; position: absolute;}
.select-list .level-line{ height: 88upx; display: flex; padding: 0 40upx; align-items: center; font-size:14px; font-weight:400; color: #666666; border-top: 2upx solid #E5E5E5;}
.hide-select { height: 0;}
.select-line-active { color: #fe9900 !important;transform: translateY;}
.select-line-active:after { content: "\e65e"; font-family: iconfont; font-size: 28upx; color: #fe9900; position: absolute; right: 40upx;}

.search-wrap{display:flex; height: 88upx; padding:16upx 30upx;background: #FFF;align-items: center;}
.search-wrap .input-search{height: inherit;}
.search-wrap .search-box-content{ width: 100%; position: relative; background:#FAFAFA; flex:1; height:56upx; text-indent:1em;border-radius: 4upx; color: #999;font-size: 28upx;}
.search-wrap .input-search .input-search-placeholder{font-size:26upx;font-family:Source Han Sans CN;color: #ccc;}
.search-wrap .btn-search{margin-left: 20upx; color:#CCC;font-size: 28upx;}
</style>
